<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">品牌详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
         <el-col class="mr20 width100" v-if="detailData.status == 1">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="edit()"
                v-hasPermi="['system:brand:edit']"
            >编辑</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.status == 1">
            <el-button
                class="btn-enable width100"
                type="primary"
                @click="enable()"
                v-hasPermi="['system:brand:enable']"
            >启用</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.status == 0">
            <el-button
                class="btn-delete width100"
                type="primary"
                @click="disable()"
                v-hasPermi="['system:brand:enable']"
            >禁用</el-button>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
            <span>品牌编号：</span>{{ detailData.brandCode ?  detailData.brandCode : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
            <span>品牌中文名称：</span>{{ detailData.brandName ?  detailData.brandName : '暂无'}}
        </el-col>
        <el-col :span="8">
            <span>英文名称：</span>{{ detailData.englishName ?  detailData.englishName : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8" style="display:flex;">
          <div class="upload-title">品牌LOGO：</div>
          <div class="avatar-uploader">
            <img v-if="detailData.brandUrl" :src="detailData.brandUrl" class="avatar">
            <p v-else>暂无</p>
          </div>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="16">
            <span>品牌简介：</span>{{ detailData.brandIntroduction ?  detailData.brandIntroduction : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="16">
            <span>状态：</span>
            <font v-if="detailData.status == 1" style="color:#fd562c">禁用</font>
            <font v-if="detailData.status == 0" style="color:#52C41A">启用</font>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="16">
            <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { detailBrand, enableBrand } from "@/api/system/basedata/brand/brand"
export default {
  name: "brandDetail",
  data(){
    return {
      detailData: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      detailBrand(this.id).then(res => {
        this.detailData = res.data
      })
    },
    // 编辑
    edit(){
      this.$tab.closeOpenPage({ path: "/basedata/brand/edit", query:{id: this.id} })
    },
    // 启用
    enable(){
      this.$modal.confirm('是否确认启用？', '启用').then(() => {
        enableBrand(this.id, 0).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("启用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 禁用
    disable(){
      this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
        enableBrand(this.id, 1).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("禁用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.upload-title{
  width: 140px;
  padding-right: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#606266;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 150px;
  display: block;
}
</style>